<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脑肿瘤自动分割系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F2F3F5',
                        'neutral-dark': '#E5E6EB',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        card: '0 2px 8px rgba(0, 0, 0, 0.08)',
                        hover: '0 4px 16px rgba(0, 0, 0, 0.12)'
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-balance {
                text-wrap: balance;
            }
        }
    </style>
    
    <style>
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 加载动画 */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        .animate-pulse-slow {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-text-primary min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-braille text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">BraTS自动分割系统</h1>
            </div>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#upload" class="text-text-secondary hover:text-primary transition-colors">文件上传</a>
                <a href="#results" class="text-text-secondary hover:text-primary transition-colors">结果展示</a>
                <a href="#about" class="text-text-secondary hover:text-primary transition-colors">关于系统</a>
                <a href="#contact" class="text-text-secondary hover:text-primary transition-colors">联系我们</a>
            </nav>
            
            <button class="md:hidden text-text-primary" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#upload" class="py-2 text-text-secondary hover:text-primary transition-colors">文件上传</a>
                <a href="#results" class="py-2 text-text-secondary hover:text-primary transition-colors">结果展示</a>
                <a href="#about" class="py-2 text-text-secondary hover:text-primary transition-colors">关于系统</a>
                <a href="#contact" class="py-2 text-text-secondary hover:text-primary transition-colors">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-4">脑肿瘤影像自动分割与分析</h2>
            <p class="text-text-secondary max-w-3xl mx-auto text-balance">
                基于先进的深度学习算法，自动分割脑肿瘤区域，提供精准的肿瘤分析和量化指标，辅助医生进行诊断和治疗决策
            </p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：上传区域 -->
            <div class="lg:col-span-1" id="upload">
                <div class="bg-white rounded-2xl shadow-card p-6 transition-all duration-300 hover:shadow-hover h-full">
                    <h2 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-upload text-primary mr-2"></i> 上传医学影像
                    </h2>
                    
                    <!-- 上传区域 -->
                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-6 hover:border-primary transition-colors cursor-pointer bg-neutral/50" id="upload-area">
                        <i class="fa fa-file-image-o text-4xl text-gray-400 mb-3"></i>
                        <p class="text-gray-600 mb-2">拖放NIfTI文件到此处，或点击上传</p>
                        <p class="text-gray-400 text-sm">支持 .nii 和 .nii.gz 格式</p>
                        <input type="file" id="file-upload" class="hidden" accept=".nii,.nii.gz">
                    </div>
                    
                    <!-- 上传文件列表 -->
                    <div class="mb-6 hidden" id="file-list-container">
                        <h3 class="font-medium text-gray-700 mb-2">已上传文件</h3>
                        <div class="space-y-2 max-h-40 overflow-y-auto scrollbar-hide" id="file-list">
                            <!-- 上传的文件将显示在这里 -->
                        </div>
                    </div>
                    
                    <!-- 模态选择 -->
                    <div class="mb-6">
                        <h3 class="font-medium text-gray-700 mb-2">选择影像模态</h3>
                        <div class="grid grid-cols-2 gap-2">
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-colors">
                                <input type="radio" name="modality" class="form-radio h-4 w-4 text-primary" value="flair" checked>
                                <span class="ml-2 text-sm">FLAIR</span>
                            </label>
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-colors">
                                <input type="radio" name="modality" class="form-radio h-4 w-4 text-primary" value="t1">
                                <span class="ml-2 text-sm">T1</span>
                            </label>
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-colors">
                                <input type="radio" name="modality" class="form-radio h-4 w-4 text-primary" value="t1ce">
                                <span class="ml-2 text-sm">T1CE</span>
                            </label>
                            <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary transition-colors">
                                <input type="radio" name="modality" class="form-radio h-4 w-4 text-primary" value="t2">
                                <span class="ml-2 text-sm">T2</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 高级选项 -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="font-medium text-gray-700">高级选项</h3>
                            <button type="button" class="text-primary text-sm" id="advanced-options-toggle">
                                <i class="fa fa-chevron-down"></i>
                            </button>
                        </div>
                        <div class="hidden p-4 bg-neutral rounded-lg" id="advanced-options">
                            <div class="mb-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">分割精度</label>
                                <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" id="precision">
                                    <option value="fast">快速模式 (推荐)</option>
                                    <option value="high">高精度模式</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">肿瘤类型优先</label>
                                <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" id="priority">
                                    <option value="auto">自动检测所有类型</option>
                                    <option value="high-grade">优先高级别胶质瘤</option>
                                    <option value="low-grade">优先低级别胶质瘤</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 分析按钮 -->
                    <button type="button" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg transition-all duration-200 flex items-center justify-center font-medium" id="analyze-button">
                        <i class="fa fa-play-circle mr-2"></i> 开始分析
                    </button>
                    
                    <!-- 处理进度 -->
                    <div class="hidden mt-4" id="progress-container">
                        <div class="flex justify-between text-sm mb-1">
                            <span id="progress-text">准备中...</span>
                            <span id="progress-percentage">0%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div class="bg-primary h-2.5 rounded-full transition-all duration-300" id="progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：结果展示 -->
            <div class="lg:col-span-2" id="results">
                <div class="bg-white rounded-2xl shadow-card p-6 transition-all duration-300 hover:shadow-hover h-full">
                    <h2 class="text-xl font-semibold mb-6 flex items-center">
                        <i class="fa fa-bar-chart text-primary mr-2"></i> 分析结果
                    </h2>
                    
                    <!-- 初始状态提示 -->
                    <div id="initial-state" class="text-center py-12">
                        <i class="fa fa-image text-5xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">上传影像并点击"开始分析"按钮查看结果</p>
                    </div>
                    
                    <!-- 结果展示区域 (初始隐藏) -->
                    <div id="results-container" class="hidden">
                        <!-- 图像展示 -->
                        <div class="mb-8">
                            <h3 class="font-medium text-gray-700 mb-4">影像分割结果</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="bg-neutral/50 rounded-xl p-4">
                                    <h4 class="text-sm font-medium text-gray-600 mb-2">原始影像</h4>
                                    <div class="aspect-video bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
                                        <img id="original-image" src="" alt="原始医学影像" class="max-w-full max-h-full object-contain">
                                    </div>
                                </div>
                                <div class="bg-neutral/50 rounded-xl p-4">
                                    <h4 class="text-sm font-medium text-gray-600 mb-2">分割结果</h4>
                                    <div class="aspect-video bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center">
                                        <img id="segmentation-image" src="" alt="肿瘤分割结果" class="max-w-full max-h-full object-contain">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 统计数据 -->
                        <div class="mb-8">
                            <h3 class="font-medium text-gray-700 mb-4">肿瘤统计数据</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div class="bg-neutral/50 rounded-xl p-4 text-center">
                                    <p class="text-text-tertiary text-sm mb-1">肿瘤体积</p>
                                    <p class="text-2xl font-semibold text-primary" id="tumor-volume">-</p>
                                    <p class="text-text-tertiary text-xs mt-1">mm³</p>
                                </div>
                                <div class="bg-neutral/50 rounded-xl p-4 text-center">
                                    <p class="text-text-tertiary text-sm mb-1">最大直径</p>
                                    <p class="text-2xl font-semibold text-primary" id="max-diameter">-</p>
                                    <p class="text-text-tertiary text-xs mt-1">mm</p>
                                </div>
                                <div class="bg-neutral/50 rounded-xl p-4 text-center">
                                    <p class="text-text-tertiary text-sm mb-1">肿瘤负荷</p>
                                    <p class="text-2xl font-semibold text-primary" id="tumor-burden">-</p>
                                    <p class="text-text-tertiary text-xs mt-1">%</p>
                                </div>
                                <div class="bg-neutral/50 rounded-xl p-4 text-center">
                                    <p class="text-text-tertiary text-sm mb-1">置信度</p>
                                    <p class="text-2xl font-semibold text-primary" id="confidence">-</p>
                                    <p class="text-text-tertiary text-xs mt-1"></p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 肿瘤类型分析 -->
                        <div class="mb-8">
                            <h3 class="font-medium text-gray-700 mb-4">肿瘤类型分析</h3>
                            <div class="bg-neutral/50 rounded-xl p-5">
                                <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
                                    <div>
                                        <h4 class="text-lg font-medium" id="tumor-type">-</h4>
                                        <p class="text-text-secondary text-sm" id="tumor-description">-</p>
                                    </div>
                                    <div class="mt-3 md:mt-0">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800" id="malignancy">
                                            恶性程度: -
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- 肿瘤区域分布 -->
                                <div class="mt-4">
                                    <h5 class="text-sm font-medium text-gray-600 mb-2">肿瘤区域分布</h5>
                                    <div class="space-y-2">
                                        <div>
                                            <div class="flex justify-between text-xs mb-1">
                                                <span>增强肿瘤</span>
                                                <span id="enhancing-percent">-</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-red-500 h-2 rounded-full" id="enhancing-bar" style="width: 0%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between text-xs mb-1">
                                                <span>水肿区域</span>
                                                <span id="edema-percent">-</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-yellow-500 h-2 rounded-full" id="edema-bar" style="width: 0%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between text-xs mb-1">
                                                <span>坏死区域</span>
                                                <span id="necrosis-percent">-</span>
                                            </div>
                                            <div class="w-full bg-gray-200 rounded-full h-2">
                                                <div class="bg-purple-500 h-2 rounded-full" id="necrosis-bar" style="width: 0%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 治疗建议 -->
                        <div>
                            <h3 class="font-medium text-gray-700 mb-4">治疗建议</h3>
                            <div class="bg-neutral/50 rounded-xl p-5">
                                <ul class="space-y-2 text-text-secondary" id="treatment-recommendations">
                                    <!-- 治疗建议将在这里显示 -->
                                </ul>
                            </div>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="mt-8 flex flex-wrap gap-4">
                            <button type="button" class="flex items-center px-5 py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all duration-200">
                                <i class="fa fa-download mr-2"></i> 下载报告
                            </button>
                            <button type="button" class="flex items-center px-5 py-2.5 bg-white border border-gray-300 hover:bg-gray-50 text-text-primary rounded-lg transition-all duration-200">
                                <i class="fa fa-share-alt mr-2"></i> 分享结果
                            </button>
                            <button type="button" class="flex items-center px-5 py-2.5 bg-white border border-gray-300 hover:bg-gray-50 text-text-primary rounded-lg transition-all duration-200" id="new-analysis-button">
                                <i class="fa fa-refresh mr-2"></i> 新分析
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 关于系统 -->
        <section id="about" class="mt-12 bg-white rounded-2xl shadow-card p-8">
            <h2 class="text-2xl font-bold mb-6">关于系统</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4">系统简介</h3>
                    <p class="text-text-secondary mb-4">
                        本系统基于BraTS（Brain Tumor Segmentation）挑战赛的最新研究成果，采用深度学习技术实现脑肿瘤的自动分割与分析。
                    </p>
                    <p class="text-text-secondary mb-4">
                        系统能够处理多种模态的脑部MRI影像，自动识别并分割肿瘤区域，计算肿瘤体积、大小等量化指标，并提供初步的肿瘤类型判断和治疗建议。
                    </p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-4">技术优势</h3>
                    <ul class="space-y-2 text-text-secondary">
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                            <span>采用3D U-Net改进架构，分割精度高</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                            <span>支持多种MRI模态，适应性强</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                            <span>自动量化分析，减少人工测量误差</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                            <span>操作简便，结果直观易懂</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4">适用范围</h3>
                    <p class="text-text-secondary mb-4">
                        本系统适用于脑胶质瘤等常见脑肿瘤的辅助诊断，可帮助医生：
                    </p>
                    <ul class="space-y-2 text-text-secondary mb-6">
                        <li class="flex items-start">
                            <i class="fa fa-stethoscope text-primary mt-1 mr-2"></i>
                            <span>快速定位肿瘤区域</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-stethoscope text-primary mt-1 mr-2"></i>
                            <span>获取肿瘤量化指标</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-stethoscope text-primary mt-1 mr-2"></i>
                            <span>辅助判断肿瘤类型和恶性程度</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-stethoscope text-primary mt-1 mr-2"></i>
                            <span>评估治疗效果和病情进展</span>
                        </li>
                    </ul>
                    
                    <div class="bg-neutral/50 p-4 rounded-xl">
                        <p class="text-text-secondary text-sm italic">
                            <i class="fa fa-info-circle text-primary mr-2"></i>
                            注意：本系统仅作为辅助诊断工具，不能替代专业医师的诊断结论。
                        </p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 联系我们 -->
        <section id="contact" class="mt-12 bg-white rounded-2xl shadow-card p-8">
            <h2 class="text-2xl font-bold mb-6">联系我们</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-envelope text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">电子邮件</h3>
                    <p class="text-text-secondary">support@brats-seg.com</p>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-phone text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">电话咨询</h3>
                    <p class="text-text-secondary">+86 123 4567 8910</p>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-map-marker text-primary text-2xl"></i>
                    </div>
                    <h3 class="font-semibold mb-2">地址</h3>
                    <p class="text-text-secondary">北京市海淀区医学科技园A座1001室</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-text-primary text-white mt-16">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-braille text-white text-2xl"></i>
                        <h3 class="text-xl font-bold">BraTS自动分割系统</h3>
                    </div>
                    <p class="text-gray-400 text-sm">
                        基于人工智能的脑肿瘤自动分割与分析系统，为医疗工作者提供精准、高效的辅助诊断工具。
                    </p>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#upload" class="hover:text-white transition-colors">文件上传</a></li>
                        <li><a href="#results" class="hover:text-white transition-colors">结果展示</a></li>
                        <li><a href="#about" class="hover:text-white transition-colors">关于系统</a></li>
                        <li><a href="#contact" class="hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">资源中心</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">技术文档</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">研究论文</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold mb-4">关注我们</h4>
                    <div class="flex space-x-4 mb-4">
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weixin text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-weibo text-white"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-linkedin text-white"></i>
                        </a>
                    </div>
                    <p class="text-gray-400 text-sm">订阅我们的更新</p>
                    <div class="flex mt-2">
                        <input type="email" placeholder="您的邮箱地址" class="px-3 py-2 text-sm bg-white/10 text-white placeholder-gray-400 rounded-l-lg focus:outline-none focus:bg-white/20 flex-grow">
                        <button class="bg-primary hover:bg-primary/90 text-white px-3 py-2 text-sm rounded-r-lg transition-colors">
                            订阅
                        </button>
                    </div>
                </div>
            </div>
            <div class="border-t border-white/10 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm">© 2023 BraTS自动分割系统. 保留所有权利.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">使用条款</a>
                    <a href="#" class="text-gray-400 text-sm hover:text-white transition-colors">免责声明</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 通知提示组件 -->
    <div id="notification" class="fixed bottom-6 right-6 bg-white shadow-lg rounded-lg p-4 max-w-xs transform translate-y-20 opacity-0 transition-all duration-300 z-50 hidden">
        <div class="flex items-start">
            <i id="notification-icon" class="fa fa-info-circle text-primary mt-0.5 mr-3 text-xl"></i>
            <div class="flex-grow">
                <h4 id="notification-title" class="font-medium text-text-primary"></h4>
                <p id="notification-message" class="text-text-secondary text-sm mt-1"></p>
            </div>
            <button id="notification-close" class="text-gray-400 hover:text-gray-600 ml-2">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>

    <script>
        // DOM元素
        const uploadArea = document.getElementById('upload-area');
        const fileUpload = document.getElementById('file-upload');
        const fileListContainer = document.getElementById('file-list-container');
        const fileList = document.getElementById('file-list');
        const analyzeButton = document.getElementById('analyze-button');
        const progressContainer = document.getElementById('progress-container');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        const progressPercentage = document.getElementById('progress-percentage');
        const initialState = document.getElementById('initial-state');
        const resultsContainer = document.getElementById('results-container');
        const advancedOptionsToggle = document.getElementById('advanced-options-toggle');
        const advancedOptions = document.getElementById('advanced-options');
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        const navbar = document.getElementById('navbar');
        const newAnalysisButton = document.getElementById('new-analysis-button');
        const notification = document.getElementById('notification');
        const notificationIcon = document.getElementById('notification-icon');
        const notificationTitle = document.getElementById('notification-title');
        const notificationMessage = document.getElementById('notification-message');
        const notificationClose = document.getElementById('notification-close');
        
        // 已上传的文件
        let uploadedFile = null;
        
        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2', 'shadow');
            }
        });
        
        // 移动端菜单切换
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 高级选项切换
        advancedOptionsToggle.addEventListener('click', () => {
            advancedOptions.classList.toggle('hidden');
            const icon = advancedOptionsToggle.querySelector('i');
            if (advancedOptions.classList.contains('hidden')) {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
            } else {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
            }
        });
        
        // 上传区域点击触发文件选择
        uploadArea.addEventListener('click', () => {
            fileUpload.click();
        });
        
        // 拖放功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('border-primary', 'bg-primary/5');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('border-primary', 'bg-primary/5');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('border-primary', 'bg-primary/5');
            
            if (e.dataTransfer.files.length) {
                handleFile(e.dataTransfer.files[0]);
            }
        });
        
        // 文件选择变化
        fileUpload.addEventListener('change', () => {
            if (fileUpload.files.length) {
                handleFile(fileUpload.files[0]);
            }
        });
        
        // 处理上传的文件
        function handleFile(file) {
            // 验证文件类型
            const validExtensions = ['.nii', '.nii.gz'];
            const fileName = file.name.toLowerCase();
            const isValid = validExtensions.some(ext => fileName.endsWith(ext));
            
            if (!isValid) {
                showNotification('错误', '请上传 .nii 或 .nii.gz 格式的文件', 'error');
                return;
            }
            
            // 保存文件引用
            uploadedFile = file;
            
            // 显示文件列表
            fileList.innerHTML = '';
            const fileItem = document.createElement('div');
            fileItem.className = 'flex items-center justify-between p-2 bg-neutral/50 rounded-lg';
            fileItem.innerHTML = `
                <div class="flex items-center">
                    <i class="fa fa-file-o text-primary mr-2"></i>
                    <span class="text-sm truncate max-w-[200px]">${file.name}</span>
                </div>
                <button class="text-gray-400 hover:text-danger transition-colors delete-file">
                    <i class="fa fa-times"></i>
                </button>
            `;
            fileList.appendChild(fileItem);
            fileListContainer.classList.remove('hidden');
            
            // 添加删除文件事件
            fileItem.querySelector('.delete-file').addEventListener('click', () => {
                uploadedFile = null;
                fileList.innerHTML = '';
                fileListContainer.classList.add('hidden');
                fileUpload.value = '';
            });
            
            showNotification('成功', '文件已准备好', 'success');
        }
        
        // 显示通知
        function showNotification(title, message, type = 'info') {
            notificationTitle.textContent = title;
            notificationMessage.textContent = message;
            
            // 设置图标和颜色
            notificationIcon.className = '';
            switch(type) {
                case 'success':
                    notificationIcon.className = 'fa fa-check-circle text-success mt-0.5 mr-3 text-xl';
                    break;
                case 'error':
                    notificationIcon.className = 'fa fa-exclamation-circle text-danger mt-0.5 mr-3 text-xl';
                    break;
                case 'warning':
                    notificationIcon.className = 'fa fa-exclamation-triangle text-warning mt-0.5 mr-3 text-xl';
                    break;
                default:
                    notificationIcon.className = 'fa fa-info-circle text-primary mt-0.5 mr-3 text-xl';
            }
            
            // 显示通知
            notification.classList.remove('hidden', 'translate-y-20', 'opacity-0');
            
            // 3秒后自动关闭
            setTimeout(() => {
                hideNotification();
            }, 3000);
        }
        
        // 隐藏通知
        function hideNotification() {
            notification.classList.add('translate-y-20', 'opacity-0');
            setTimeout(() => {
                notification.classList.add('hidden');
            }, 300);
        }
        
        // 关闭通知按钮
        notificationClose.addEventListener('click', hideNotification);
        
        // 开始分析按钮点击事件
        analyzeButton.addEventListener('click', () => {
            if (!uploadedFile) {
                showNotification('错误', '请先上传NIfTI文件', 'error');
                return;
            }
            
            // 获取选中的模态
            const selectedModality = document.querySelector('input[name="modality"]:checked').value;
            
            // 获取高级选项
            const precision = document.getElementById('precision').value;
            const priority = document.getElementById('priority').value;
            
            // 显示进度条
            progressContainer.classList.remove('hidden');
            progressBar.style.width = '0%';
            progressPercentage.textContent = '0%';
            progressText.textContent = '正在准备数据...';
            
            // 禁用分析按钮
            analyzeButton.disabled = true;
            analyzeButton.classList.add('opacity-70', 'cursor-not-allowed');
            
            // 模拟进度更新（实际应用中会被后端真实进度替代）
            simulateProgress();
            
            // 发送文件到后端
            uploadFileToServer(uploadedFile, selectedModality, precision, priority);
        });
        
        // 模拟进度更新
        function simulateProgress() {
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress > 90) {
                    progress = 90;
                    clearInterval(interval);
                }
                progressBar.style.width = `${progress}%`;
                progressPercentage.textContent = `${Math.round(progress)}%`;
                
                // 更新进度文本
                if (progress < 30) {
                    progressText.textContent = '正在上传文件...';
                } else if (progress < 60) {
                    progressText.textContent = '正在处理影像数据...';
                } else {
                    progressText.textContent = '正在进行肿瘤分割...';
                }
            }, 500);
        }
        
        // 上传文件到服务器
        function uploadFileToServer(file, modality, precision, priority) {
            const formData = new FormData();
            formData.append('image', file);
            formData.append('modality', modality);
            formData.append('precision', precision);
            formData.append('priority', priority);
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:5000/api/upload', true);
            
            // 处理进度更新（如果服务器支持）
            xhr.upload.addEventListener('progress', (e) => {
                if (e.lengthComputable) {
                    const progress = (e.loaded / e.total) * 30; // 上传占30%进度
                    progressBar.style.width = `${progress}%`;
                    progressPercentage.textContent = `${Math.round(progress)}%`;
                }
            });
            
            // 处理服务器返回的进度更新
            xhr.addEventListener('progress', (e) => {
                // 这里可以处理服务器发送的进度更新
            });
            
            // 请求完成处理
            xhr.onload = function() {
                // 完成进度
                progressBar.style.width = '100%';
                progressPercentage.textContent = '100%';
                progressText.textContent = '分析完成';
                
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        displayResults(response);
                        showNotification('成功', '影像分析完成', 'success');
                    } catch (error) {
                        console.error('解析响应失败:', error);
                        showNotification('错误', '处理结果解析失败', 'error');
                        resetAnalysisState();
                    }
                } else {
                    try {
                        const errorResponse = JSON.parse(xhr.responseText);
                        showNotification('错误', errorResponse.error || '处理失败', 'error');
                    } catch (error) {
                        showNotification('错误', '服务器错误', 'error');
                    }
                    resetAnalysisState();
                }
            };
            
            // 错误处理
            xhr.onerror = function() {
                showNotification('错误', '网络错误，请重试', 'error');
                resetAnalysisState();
            };
            
            // 超时处理
            xhr.ontimeout = function() {
                showNotification('错误', '请求超时，请重试', 'error');
                resetAnalysisState();
            };
            
            // 设置超时时间（300秒）
            xhr.timeout = 300000;
            
            // 发送请求
            xhr.send(formData);
        }
        
        // 显示分析结果
        function displayResults(data) {
            // 隐藏初始状态，显示结果容器
            initialState.classList.add('hidden');
            resultsContainer.classList.remove('hidden');
            
            // 显示图像
            if (data.original_visualization) {
                document.getElementById('original-image').src = `data:image/png;base64,${data.original_visualization}`;
            }
            if (data.segmentation_visualization) {
                document.getElementById('segmentation-image').src = `data:image/png;base64,${data.segmentation_visualization}`;
            }
            
            // 显示统计数据
            if (data.stats) {
                document.getElementById('tumor-volume').textContent = data.stats.total_volume ? data.stats.total_volume.toFixed(1) : '-';
                document.getElementById('max-diameter').textContent = data.stats.max_diameter ? data.stats.max_diameter.toFixed(1) : '-';
                document.getElementById('tumor-burden').textContent = data.stats.tumor_burden ? data.stats.tumor_burden.toFixed(1) : '-';
                document.getElementById('confidence').textContent = data.stats.confidence ? (data.stats.confidence * 100).toFixed(0) + '%' : '-';
            }
            
            // 显示肿瘤类型分析
            if (data.tumor_type) {
                document.getElementById('tumor-type').textContent = data.tumor_type.name || '未知肿瘤类型';
                document.getElementById('tumor-description').textContent = data.tumor_type.description || '无可用描述';
                document.getElementById('malignancy').textContent = `恶性程度: ${data.tumor_type.malignancy || '未知'}`;
            }
            
            // 显示肿瘤区域分布
            if (data.regions) {
                const enhancingPercent = data.regions.enhancing ? (data.regions.enhancing * 100).toFixed(0) + '%' : '-';
                const edemaPercent = data.regions.edema ? (data.regions.edema * 100).toFixed(0) + '%' : '-';
                const necrosisPercent = data.regions.necrosis ? (data.regions.necrosis * 100).toFixed(0) + '%' : '-';
                
                document.getElementById('enhancing-percent').textContent = enhancingPercent;
                document.getElementById('edema-percent').textContent = edemaPercent;
                document.getElementById('necrosis-percent').textContent = necrosisPercent;
                
                if (data.regions.enhancing) {
                    document.getElementById('enhancing-bar').style.width = `${data.regions.enhancing * 100}%`;
                }
                if (data.regions.edema) {
                    document.getElementById('edema-bar').style.width = `${data.regions.edema * 100}%`;
                }
                if (data.regions.necrosis) {
                    document.getElementById('necrosis-bar').style.width = `${data.regions.necrosis * 100}%`;
                }
            }
            
            // 显示治疗建议
            const recommendationsList = document.getElementById('treatment-recommendations');
            recommendationsList.innerHTML = '';
            
            if (data.treatment_recommendations && data.treatment_recommendations.length) {
                data.treatment_recommendations.forEach(rec => {
                    const li = document.createElement('li');
                    li.className = 'flex items-start';
                    li.innerHTML = `
                        <i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
                        <span>${rec}</span>
                    `;
                    recommendationsList.appendChild(li);
                });
            } else {
                const li = document.createElement('li');
                li.textContent = '无可用治疗建议';
                recommendationsList.appendChild(li);
            }
            
            // 重置分析按钮状态
            setTimeout(() => {
                progressContainer.classList.add('hidden');
                analyzeButton.disabled = false;
                analyzeButton.classList.remove('opacity-70', 'cursor-not-allowed');
            }, 1000);
        }
        
        // 重置分析状态
        function resetAnalysisState() {
            progressContainer.classList.add('hidden');
            analyzeButton.disabled = false;
            analyzeButton.classList.remove('opacity-70', 'cursor-not-allowed');
        }
        
        // 新分析按钮点击事件
        newAnalysisButton.addEventListener('click', () => {
            // 重置文件上传区域
            uploadedFile = null;
            fileList.innerHTML = '';
            fileListContainer.classList.add('hidden');
            fileUpload.value = '';
            
            // 重置结果区域
            resultsContainer.classList.add('hidden');
            initialState.classList.remove('hidden');
            
            // 滚动到上传区域
            document.getElementById('upload').scrollIntoView({ behavior: 'smooth' });
        });
    </script>
</body>
</html>
